<template>
  <div class="wrap" v-loading="loading">
    <el-card class="header-card">
      <div class="item">
        <p class="font-bold" >{{ $t('table.组装单号') }}：{{ data.combinationNo }}</p>
        <p class="font-bold" v-if="data.shipmentNo">{{ $t('table.shipmentNumber') }}：{{data.shipmentNo}}</p>
        <p class="">{{ $t('table.组装状态') }}：{{ getCombinationStatus(data.status) }}</p>
        <p>
          <span>{{ $t('table.createTime2') }}：{{ data.createTime }}</span>
          <span class="mgl20" v-if="data.finishTime">{{ $t('table.完成时间') }}：{{ data.finishTime }}</span>
        </p>
        <p>
          <span>{{ $t('table.商品种数') }}: {{ data.skuNum }}</span>
          <span class="mgl20">{{ $t('table.商品总数量') }}: {{ data.goodsNum }}</span>
        </p>
        <p v-if="data.status === 1">
          <span>{{ $t('table.组装费用（元）') }}：{{ data.combinationFee }}</span>
        </p>
      </div>
      <div class="button">
        <div v-if="data.shipmentId">
          <el-button type="primary" @click="jumpShipmentInfo(data.shipmentId, true)">{{ $t('shipment.货件单') }}</el-button>
        </div>
      </div>
    </el-card>
    <div class="content">
      <div>
        <h4>{{$t('combination.组装商品详细情况')}}</h4>
        <div class="table">
          <el-table
            :data="goodsList"
            :border="true"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              prop="image"
              :label="$t('table.productCover')"
              align="center"
              width="120"
            >
              <template slot-scope="{row}">
                <div class="img-box img-one">
                  <img :src="row.image" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              :label="$t('table.title')"
              align="left"
              show-overflow-tooltip
              min-width="250"
            >
              <template slot-scope="{row}">
                <div>
                  <div class="goods-title hidden-1">{{row.title}}</div>
                  <div class="goods-attr hidden-1">
                  <span
                    v-for="attr in row.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.ListingIDAndSKU')"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                <template v-if="row.isTB">
                  {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
                </template>
                <template v-else-if="row.isSystemLabel">
                  {{ $t('shipment.System label') }} ({{row.sku}})
                </template>
                <template v-else>
                  {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
                </template>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('table.expectedReceiptQuantityBox')"
              min-width="200"
              prop="exGoodsBoxNum"
            >
              <template slot-scope="{row}">
                {{row.exGoodsBoxNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.expectedReceiptQuantityMix')"
              min-width="200"
              prop="exGoodsMixinNum"
            >
              <template slot-scope="{row}">
                {{row.exGoodsMixinNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.exTotalGoodsNum')"
              min-width="200"
              prop="sumExGoodsNum"
            >
              <template slot-scope="{row}">
                {{row.sumExGoodsNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.组装单价（元）')"
              min-width="200"
              prop="combinationFee"
              v-if="data.status === 1"
            >
            </el-table-column>
            <el-table-column
              :label="$t('table.组装费用（元）')"
              min-width="200"
              prop="sumCombinationFee"
              v-if="data.status === 1"
            >
            </el-table-column>
          </el-table>

        </div>
        <div class="mgt20">
          <el-button @click="back">{{$t('common.back')}}</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {attrNumber} from "@/utils/common";
import {getCombinationInfo, getCombinationList} from "@/api/combination";
import {getCombinationStatus} from "@/utils/combination";
import {jumpShipmentInfo} from "@/utils/jumpView";

export default {
  name: "combinationInfo",
  data(){
    return {
      id: 0,
      loading: false,
      data: {

      },
      goodsList: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    if(!this.id){
      this.$errorMessage('参数缺失')
      this.$router.push({
        name: 'combinationList'
      })
      return;
    }
    this.getData()
  },
  methods: {
    jumpShipmentInfo,
    getCombinationStatus,
    attrNumber,
    getData(){
      this.loading = true
      getCombinationInfo(this.id)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.goodsList = res.info.goodsList
        })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.getMergeCell(this.goodsList)
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    getMergeCell(list){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'goodsNumInBox',
        'exTotalGoodsNum',
        'exGoodsNum',
        'sumExGoodsNum',
        'combinationFee',
        'sumCombinationFee'
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      list.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并


        if(item.suitId && item.suitId === list[index - 1].suitId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
    back(){
      this.$router.push({
        name: 'combinationList',
      })
    },
  },

}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 30px;
  .header{
    display: block;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
  .header-card{
    position: relative;
    .button{
      position: absolute;
      display: flex;
      flex-direction: column;
      right: 20px;
      top: 30px;
    }
  }
}
</style>
